<template>
  <div class="personal-info">
              <!-- ======== 顶部信息区 ======== -->
              <div class="profile-header">
                <!-- 头像 -->
                <img class="avatar" :src="user.avatar" alt="头像" />
                <!-- 用户信息（名称、等级、经验条、硬币） -->
                <div class="info">
                  <div class="name-level">
                    <h2>{{user.userName}}</h2>
                    <span
                    :class="levelBadgeClass"
                    class="level-badge"
                  >
                    LV{{ user.level }}
                  </span>
                  <button @click="goedit" class="edit-btn">
                    编辑个人信息
                  </button>
                  </div>
     <!-- 经验条与硬币显示 -->
                  <div class="exp-bar">
                    <div class="exp-text">
                      <span>经验值: {{ user.exp }}/{{ user.nextExp }}</span>
                      <span class="coin">硬币: {{ user.coin }}</span>
                    </div>
                    <div class="bar-container">
                      <div class="bar-fill" :style="{ width: expPercent + '%' }"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="divider"></div>
              <!-- ======== 每日奖励 ======== -->
              <div class="daily-rewards">
                <div class="section-header">
                  <i class="fas fa-calendar-check header-icon"></i>
                  <span class="header-title">每日奖励</span>
                </div>
                <ul>
                  <li v-for="(task, index) in dailyTasks" :key="index">
                    <i :class="task.icon"></i>
                    <span>{{ task.title }}</span>
                    <span class="exp-gain">+{{ task.exp }} EXP</span>
                  </li>
                </ul>
              </div>
              <div class="divider"></div>
              <!-- ======== 成就勋章 ======== -->
              <div class="achievements">
                <div class="section-header">
                  <i class="fas fa-medal header-icon"></i>
                  <span class="header-title">成就勋章</span>
                </div>
                <ul>
                  <li v-for="(medal, index) in medals" :key="index">
                    <img :src="medal.icon" :alt="medal.name" />
                    <span>{{ medal.name }}</span>
                  </li>
                </ul>
              </div>
              <div class="divider"></div>
              <!-- ======== 账号安全 ======== -->
              <div class="account-security">
                <div class="section-header">
                  <i class="fas fa-lock header-icon"></i>
                  <span class="header-title">账号安全</span>
                </div>
                <div class="account-cards">
                  <!-- 我的手机卡片 -->
                  <el-card class="account-card" shadow="hover" @click="handleEdit('phone')">
                    <div class="card-content">
                      <i class="fas fa-phone-alt card-icon"></i>
                      <div class="card-info">
                        <div class="card-title">我的手机</div>
                        <div class="card-value">{{ user.person.phone }}</div>
                      </div>
                    </div>
                  </el-card>
            
                  <!-- 绑定邮箱卡片 -->
                  <el-card class="account-card" shadow="hover" @click="handleEdit('email')">
                    <div class="card-content">
                      <i class="fas fa-envelope card-icon"></i>
                      <div class="card-info">
                        <div class="card-title">绑定邮箱</div>
                        <div class="card-value">{{ user.person.email }}</div>
                      </div>
                    </div>
                  </el-card>
            
                  <!-- 更改密码卡片 -->
                  <el-card class="account-card" shadow="hover" @click="handleEdit('password')">
                    <div class="card-content">
                      <i class="fas fa-key card-icon"></i>
                      <div class="card-info">
                        <div class="card-title">更改密码</div>
                        <div class="card-value">点击修改</div>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
  </template>
  
  <script>
  import { ref, reactive, computed ,onMounted,watch} from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { findchaiByName ,deleteOrderById} from '@/api/user'
  import { InfoFilled, Edit, Delete } from '@element-plus/icons-vue' 
  export default {
    name: "infoView",
    components: { },
    props: {
    userInfo: Object
  },
    setup(props,{emit}) {
      // 当前激活的功能页面
  const router = useRouter()
  const route = useRoute()
      // 模拟的用户数据
      const user = ref(props.userInfo)
   
watch(() => props.userInfo, (newVal) => {
  user.value = newVal
}, { deep: true }) // 深度监听对象内部变化
  
      // 每日奖励（假数据）
      const dailyTasks = ref([
    { title: '每日签到', exp: 5, icon: 'fas fa-check-circle' },
    { title: '浏览5个帖子', exp: 10, icon: 'fas fa-eye' },
    { title: '每日评论', exp: 5, icon: 'fas fa-comment' },
    { title: '发表游记', exp: 5, icon: 'fas fa-pencil-alt' },
  ])
  
      // 成就勋章（假数据）
      const medals = ref([
        { name: '收藏勋章', icon: 'https://example.com/medal1.png' },
        { name: '分享达人', icon: 'https://example.com/medal2.png' },
      ])
      const levelBadgeClass = computed(() => {
      switch (user.value.level) {
        case 1:
          return 'level-badge level-1'; // 灰色
        case 2:
          return 'level-badge level-2'; // 绿色
        case 3:
          return 'level-badge level-3'; // 蓝色
        case 4:
          return 'level-badge level-4'; // 粉色
        case 5:
          return 'level-badge level-5'; // 金色
        default:
          return 'level-badge level-1'; // 默认灰色
      }
    });

      // 计算经验条百分比
      const expPercent = computed(() => {
        return ((user.value.exp / user.value.nextExp) * 100).toFixed(2)
      })
     // 定义 `emit` 事件

// 点击按钮触发事件
const goedit = () => {
  console.log("点击按钮了") 
  emit("updateUserInfo", "settings");
 // 触发事件并传递数据
};
     
     
      return {
        user,
        dailyTasks,
        medals,
        expPercent,
        levelBadgeClass,
        goedit
     

      }
    }
  }
  </script>
  
  <style scoped>

.personal-info {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

/* ===== 顶部信息区 ===== */
.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

/* 头像 */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 16px;
  object-fit: cover;
}

/* 用户信息 */
.info {
  flex: 1;
}

.name-level {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 控制间距，避免重叠 */
  flex-wrap: wrap; /* 避免换行时元素重叠 */
  position: relative;
}

.name-level h2 {
  margin: 0;
  font-size: 24px;
  white-space: nowrap; /* 防止换行 */
}

.level-badge {
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative; /* 避免绝对定位影响布局 */
}

.edit-btn {
  margin-left: auto; /* 让按钮靠右 */
}



.level-1 {
  background: #b0bec5; /* 灰色 */
}

.level-2 {
  background: #66bb6a; /* 绿色 */
}

.level-3 {
  background: #42a5f5; /* 蓝色 */
}

.level-4 {
  background: #fb7299; /* 粉色 */
}

.level-5 {
  background: #ffb300; /* 金色 */
}

/* 经验条 */
.exp-bar {
  margin-top: 8px;
}

.exp-text {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 2px;
}

.coin {
  color: #ff9500;
}

.bar-container {
  height: 8px;
  background-color: #eee;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}

.bar-fill {
  height: 100%;
  background-color: #00a1d6; /* 进度条颜色 */
}


/* ===== 每日奖励 ===== */
.daily-rewards {
  margin-bottom: 16px;
}

.daily-rewards h3 {
  margin-bottom: 12px;
}

.daily-rewards ul {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;
}

.daily-rewards li {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 16px;
  width: 100px;
  text-align: center;
}

.daily-rewards .exp-gain {
  color: #00a1d6;
  margin-top: 4px;
}

/* ===== 成就勋章 ===== */
.achievements h3 {
  margin-bottom: 12px;
}

.achievements ul {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;
}

.achievements li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
}

.achievements img {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
}

.account-security {
  margin-top: 20px;
}

.account-security h3 {
  margin-bottom: 16px;
}

.account-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.account-card {
  flex: 1 1 calc(50% - 16px); /* 每行显示2个卡片，考虑到间隙 */
  cursor: pointer;
  transition: transform 0.2s;
}

.account-card:hover {
  transform: scale(1.02);
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  font-size: 24px;
  margin-right: 12px;
  color: #00a1d6;
}

.card-info {
  display: flex;
  flex-direction: column;
}

.card-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 4px;
}

.card-value {
  font-size: 14px;
  color: #666;
}
/* 区块容器 */
.section {
  margin-bottom: 16px;
}

/* 标题行 */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.header-icon {
  font-size: 20px;
  color: #00a1d6;
  margin-right: 8px;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 分割线 */
.divider {
  height: 1px;
  background-color: #eaeaea;
  margin: 16px 0;
}

/* 如果需要，也可以调整每日奖励和成就勋章的列表样式 */
.daily-rewards-list,
.achievements-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.daily-rewards-list li,
.achievements-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.edit-btn {
  padding: 10px 16px;
  background-color: #007bff;
  color: white;
  font-size: 14px;
  font-weight: bold;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.edit-btn:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}
  </style>
  